{extend name="main"}
{block name="style"}
<style type="text/css">
	.w-100px{width: 100px;}
</style>
{/block}
{block name="body"}
<div class="flex mb-3" v-if="countData">
	<div class="shadow-sm p-3 flex-1 bg-white">
		<h6>当前可用</h6>
		<div class="flex small px-3 mt-4">
			<div class="flex-1">
				<div>剩余条数</div>
				<div class="h3 mb-0 pt-2">{{XYBase.number_format(countData.stock_sum)}} <span class="text-mini text-secondary">条</span></div>
			</div>
			<div class="flex-1">
				<div>总</div>
				<div class="h3 mb-0 pt-2">{{XYBase.number_format(countData.sum)}} <span class="text-mini text-secondary">条</span></div>
			</div>
		</div>
	</div>
	<div class="mx-2"></div>
	<div class="shadow-sm p-3 flex-1 bg-white">
		<h6>已使用</h6>
		<div class="flex small px-3 mt-4">
			<div class="flex-1">
				<div>昨日发送</div>
				<div class="h3 mb-0 pt-2">{{XYBase.number_format(countData.send_sum_yesterday)}} <span class="text-mini text-secondary">条</span></div>
			</div>
			<div class="flex-1">
				<div>今日发送</div>
				<div class="h3 mb-0 pt-2">{{XYBase.number_format(countData.send_sum_today)}} <span class="text-mini text-secondary">条</span></div>
			</div>
			<div class="flex-1">
				<div>总发送</div>
				<div class="h3 mb-0 pt-2">{{XYBase.number_format(countData.send_sum)}} <span class="text-mini text-secondary">条</span></div>
			</div>
		</div>
	</div>
</div>
<div class="bg-white mb-3">
	<el-form :model="search" @submit.native.prevent="submitForm" ref="search" label-position="right" class="flex py-3">

	  <el-form-item label="接收者" prop="username" class="flex mb-0 pl-3">
	    <el-input v-model="search.username" placeholder="手机号或邮箱"></el-input>
	  </el-form-item>

	  <el-form-item label="IP" prop="ip" class="flex mb-0 pl-3">
	    <el-input v-model="search.ip" placeholder="IP"></el-input>
	  </el-form-item>

	  <el-form-item label="时间" prop="time" class="flex mb-0 pl-3">
	  	<el-date-picker
	      v-model="search.time"
	      type="daterange"
	      align="left"
	      range-separator="至"
	      start-placeholder="开始日期"
	      end-placeholder="结束日期"
	      format="yyyy-M-d"
	      value-format="yyyy-M-d"
	      :picker-options="pickerOptions">
	    </el-date-picker>
	  </el-form-item>

	  <el-form-item class="flex mb-0 pl-3">
	    <el-button type="primary" @click="initHtml">查询</el-button>
	    <el-button @click="resetForm('search')">重置</el-button>
	  </el-form-item>
	</el-form>
</div>
<div class="bg-white p-3">
	<div class="table-responsive">
		<el-table
      	:data="tableData"
		v-loading="search.ajax"
		style="width: 100%;"
		header-cell-class-name="table-header-DDE6FB">
	    <el-table-column
	      prop="id"
	      label="ID"
	      width="100">
	    </el-table-column>
	    <el-table-column
	      prop="username"
	      label="接收者"
	      width="180">
	    </el-table-column>
	    <el-table-column
	      prop="app_name"
	      label="事件"
	      width="200">
	      <template slot-scope="scope">
	      	<span v-if="scope.row.type==='push'">推送</span>
	      	<span v-if="scope.row.type==='mobile'">短信验证码</span>
	      	<span v-if="scope.row.type==='email'">邮件验证码</span>
	      </template>
	    </el-table-column>
	    <el-table-column
	      prop="action"
	      label="操作"
	      width="160">
	    </el-table-column>
	    <el-table-column
	      prop="msg"
	      label="内容">
	    </el-table-column>
	    <el-table-column
	      prop="ip"
	      label="IP"
	      width="160">
	    </el-table-column>
	    <el-table-column
	      prop="create_time"
	      label="访问时间"
	      width="240">
	    </el-table-column>
	    </el-table>
	</div>
	<div class="table-responsive py-3 text-center">
		<el-pagination
		  background
	      @size-change="handleSizeChange"
	      @current-change="handleCurrentChange"
	      :current-page="search.page"
	      :page-sizes="[10,50,100,200,500,1000]"
	      :page-size="search.pageSize"
	      layout="total, sizes, prev, pager, next, jumper"
	      :total="search.total">
	    </el-pagination>
	</div>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
	{empty name="countData"}
	var countData=null;
	{else/}
	var countData={:json_encode($countData,JSON_UNESCAPED_UNICODE)};
	{/empty}
</script>
<script type="text/javascript">
	var vm=new Vue({
		el:'#app',
		data:{
			view:XYBase.view,
			countData:countData,
			dialogTableVisible:false,
			labelPosition:'right',
	        pickerOptions: {
	          shortcuts: [{
	            text: '最近一周',
	            onClick(picker) {
	              const end = new Date();
	              const start = new Date();
	              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
	              picker.$emit('pick', [start, end]);
	            }
	          }, {
	            text: '最近一个月',
	            onClick(picker) {
	              const end = new Date();
	              const start = new Date();
	              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
	              picker.$emit('pick', [start, end]);
	            }
	          }, {
	            text: '最近三个月',
	            onClick(picker) {
	              const end = new Date();
	              const start = new Date();
	              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
	              picker.$emit('pick', [start, end]);
	            }
	          }, {
	            text: '最近半年',
	            onClick(picker) {
	              const end = new Date();
	              const start = new Date();
	              start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
	              picker.$emit('pick', [start, end]);
	            }
	          }]
	      	},
			search:{
				mobile:'',
				ip:'',
				time:[],
				ajax:false,
				page:1,
				total:0,
				pageSize:10
			},
			tableData:[],
		},
		watch:{
		    view:XYBase.viewWatch,
		},
		created(){
			XYBase.created(this);
		},
	    methods: {
			resetForm:function(formName) {
				this.$refs[formName].resetFields();
			},
			handleSizeChange(val) {
				this.search.page=1;
				this.search.pageSize=val;
	          	this.initHtml();
			},
			handleCurrentChange(val) {
				this.search.page=val;
	          	this.initHtml();
			},
	      	initHtml() {
	      		var _this=this;
	      		_this.search.ajax=true;
				$.ajax({
					url:'',
					type:'get',
					data:_this.search,
					dataType:'json',
					error:function(err){
	      				_this.search.ajax=false;
						XYBase.error(XYBase.config.system_network_error);
					},
					success:function(ret){
	      				_this.search.ajax=false;
						if (ret) {
							if (ret.code === 0) {
								_this.search.total=ret.data.total;
								_this.tableData=ret.data.data;
							}else{
								XYBase.msg(ret.msg);
							}
						}else{
							XYBase.error(XYBase.config.system_network_error);
						}
					}
				});
			},
	    }
	});
	$(function(){
		vm.initHtml();
		reloadWindowSize();
		$(window).resize(function(){
			reloadWindowSize();
		});
	});
	function reloadWindowSize (argument) {
		var winW=$(window).width();
		if(winW <= 576){
			vm.labelPosition='top';
		}else{
			vm.labelPosition='right';
		}
	}
</script>
{/block}